<template>
    <div>        
        <selectInput v-model="size" :title="sizeTitle" :options="sizeOpt" :width="185" :height="25" @change="sizeChange"/>
        <dragInput v-model="attr.size.width" :step="10" title="宽度"/>
        <dragInput v-model="attr.size.height" :step="10" title="高度" />
        <checkInput v-model="attr.gridVisible" title="辅助网格" />
        <colorPicker v-model="attr.backgroundColor" :height="40" :width="80" title="背景色" />        
    </div>
</template>
<script>
import dragInput from "./tools/dragInput"
import checkInput from "./tools/checkInput"
import selectInput from "./tools/selectInput"
import colorPicker from "./tools/colorPicker"
export default {
    name:'pageAttr',
    components: { dragInput,checkInput,selectInput,colorPicker },
    data(){
        return {
            // data:this.attr,
            size:"640x480",
            sizeOpt:[{value:'640x480',title:'640x480'},
            {value:'800x600',title:'800x600'},
            {value:'1024x768',title:'1024x768'},
            {value:'1280x960',title:'1280x960'},
            {value:'1600x1200',title:'1600x1200'}],
        }
    },
    props:{
        attr:{type:Object,default:()=>{ 
            return {
                title:'页面名称',
                size: {width:1024,height:768},
                gridVisible:true,
                isMain:true
            };
        }}
    },
	watch:{
		data(v,o){
			this.$emit('change',v);
		}
	},
    computed: {
      normalizedSize: function () {
        return this.attr
      },
      sizeTitle:function(){
          return `尺寸:<span style="font-style:bold;">${this.attr.size.width}x${this.attr.size.height}</span><span style="float:right">▼</span>`
      }
    },
    methods:{
        sizeChange:function(v){
            var arr=v.split('x');
            if(arr.length === 2 && !isNaN(arr[0]) && !isNaN(arr[1])){
                this.$emit("sizeChange",{width:parseInt(arr[0]),height:parseInt(arr[1])});
            }
        }
    }
}
</script>
